// 1. 导入路由对象 与vuex对象
import router from '@/router'
import store from '@/store'

// 导入NProgress进度条
import NProgress from 'nprogress'// 引入一份进度条插件
import 'nprogress/nprogress.css'// 引入进度条样式
// 开启进度条效果 NProgress.start()
// 关闭进度条效果 NProgress.done()

// 白名单 没有token也能访问的页面
const whiteList = ['/login', '/404']

// 设置路由前置守卫
// to : 要去的组件
// from : 从哪个组件来
// next : 函数 放行 next(false)不跳
router.beforeEach(async(to, from, next) => {
  NProgress.start()
  const token = store.getters.token
  // 判断是否有token
  if (token) {
    //   有token
    if (to.path === '/login') {
      // 有token还去登录页 则跳转到主页
      next('/')
      NProgress.done()
    } else {
      // 有token去其它 放行

      // // 在这里获取用户信息 (dispatch里面是异步代码 不等待直接往下执行 加上await =>执行完后再往下执行)
      // // 判断用户是否已经存在信息 如果存在则不再获取,若不存在则获取用户信息
      if (!store.state.user.userInfo.userId) {
        // const { roles: { menus }} =
        await store.dispatch('user/getUserInfo')
        // console.log(menus)
        //   // menus :路由对应关系

        //   // 1.根据menus筛选对应的路由

        //   // 2.将筛选的路由再添加到路由规则中 : router.addRoutes([{path:xxx,component:xxx},{}])
        //   // console.log(router)
        //   // 建议将修改路由的业务逻辑都放在vuex中
        //   const otherRoutes = await store.dispatch('permission/filterRouters', menus)

        //   router.addRoutes([
        //     ...otherRoutes,
        //     { path: '*', redirect: '/404', hidden: true }
        //   ])

      //   // 3.临时添加所有的动态路由 测试router.addRoutes()
      //   // router.addRoutes(asyncRoutes) // 动态添加路由是异步的
      //   next({
      //     ...to,
      //     replace: true// 重新进一次 不保留重复历史(清空上一次的信息)
      //   })
      }
      next()
    }
  } else {
    // 没有token
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})

// 有路径的跳转 就不会进入后置守卫中(所以进度条没有关闭 =>在路径跳转的位置 加NProgress.done())

// 设置路由的后置守卫
router.afterEach((to, from) => {
  setTimeout(function() {
    NProgress.done()
  }, 500)
})
